<template>
	<view class="tabs-container">
		<!-- 标签页区域 -->
		<view class="tabs-header">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
				:class="{ 'active': currentIndex === index }" :data-index="index" @click.stop="handleTabClick(tab)">
				{{ tab.typeName }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 接收外部传入的标签配置
	const props = defineProps({
		tabs: {
			type: Array,
			required: true,
			default: () => []
		},
	});
	const currentIndex = ref(0)

	// 更新当前索引（受控模式）
	const emit = defineEmits(['currentIndex']);

	const handleTabClick = (val) => {
		if (val.id !== currentIndex.value) {
			currentIndex.value = val.id
			emit('currentIndex', val.id);
		}
	};
</script>

<style scoped lang="scss">
	.tabs-container {
		width: 100%;
	}

	.tabs-header {
		display: flex;
		overflow-x: auto;
		flex-wrap: nowrap;
		padding: 20rpx 0;

		.tab-item {
			flex: none;
			padding: 10rpx 20rpx;
			margin: 10rpx;
			text-align: center;
			font-size: 16px;
			color: #666;
			cursor: pointer;
			transition: all 0.3s ease;
			border-bottom: 2px solid transparent;

			&.active {
				color: #333;
				border-bottom: 2px solid #2196F3;
			}
		}
	}
</style>